<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <!-- 搜索与添加 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input v-model="ArrObj.query" clearable @clear="getUserslist" placeholder="请输入内容"  class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="getUserslist"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="adddialogVisible = true" >添加用户</el-button>
                </el-col>
            </el-row>
            <!-- 列表显示区 -->
            <el-table v-loading="loading" :data="Userslist" border stripe >
                <el-table-column type="index" label="#" ></el-table-column>
                <el-table-column prop="username" label="姓名" ></el-table-column>
                <el-table-column prop="realname" label="用户名" ></el-table-column>
                <el-table-column prop="role_name" label="角色" ></el-table-column>
                <el-table-column label="状态" >
                    <template v-slot="scope">
                        <el-switch
                        v-model="scope.row.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949" @change="statusUp(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template v-slot="scope" >
                        <!-- 修改按钮 -->
                        <el-tooltip effect="dark" content="修改按钮" placement="top" :enterable="false">
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editMessage(scope.row)"></el-button>
                        </el-tooltip>
                        <!-- 删除按钮 -->
                        <el-tooltip effect="dark" content="删除按钮" placement="top" :enterable="false">
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)"></el-button>
                        </el-tooltip>
                        <!-- 角色分配按钮 -->
                        <el-tooltip effect="dark" content="角色分配按钮" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页区 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="ArrObj.pagenum"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="ArrObj.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>

        <!-- 添加用户弹出层 -->
        <el-dialog
        :title="title"
        :visible.sync="adddialogVisible"
        width="50%"
        @close="addDialog"
        >
        <!-- 内容主体 -->
        <el-form :model="addForm" status-icon :rules="addFormRules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="realname">
                <el-input v-model="addForm.realname"></el-input>
            </el-form-item>
            <!-- <el-form-item label="手机号" prop="phone">
                <el-input v-model="addForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="addForm.email"></el-input>
            </el-form-item> -->
            <el-form-item label="用户名" prop="username">
                <el-input v-model="addForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="addForm.password"></el-input>
            </el-form-item>
            <el-form-item label="管理角色" prop="role_id">
                <el-select v-model="addForm.role_id" placeholder="请选择管理角色" >
                    <el-option v-for="item in option" :key="item.id" :label="item.role_name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="addForm.status" ></el-switch>
            </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="adddialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addAdminUser">确 定</el-button>
        </span>
        </el-dialog>

        
    </div>
</template>

<script>
export default {
    data(){
        // // 自定义邮箱验证
        // var checkemail = (rule, value, callback) => {
        //     // 邮箱正则
        //     const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-z0-9_-])+(\.[a-zA-Z0-9_-])+/
        //     if(!regEmail.test(value)){
        //         callback(new Error('请输入合法的邮箱'))
        //     }
        //     return callback();
        // }
        // // 自定义手机号验证
        // var checkphone = (rule, value, callback) => {
        //     // 手机号正则
        //     const regPhone = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
        //     if(!regPhone.test(value)){
        //         callback(new Error('请输入合法的手机号'))
        //     }
        //     return callback();
        // }
        return {
            
            // 获取用户列表的参数对象
            ArrObj:{
                'query':'',
                // 页码值
                'pagenum':1,
                // 数量
                'pagesize':2,
            },
            Userslist:[],
            title:'添加用户',
            total:0,
            loading: true,
            // 管理角色数组
            option:[],
            // 控制添加用户对话框的显示与隐藏
            adddialogVisible:false,
            // 添加用户表单数据
            addForm: {
                realname:'',
                // phone:'',
                // email:'',
                username: '',
                password: '',
                role_id: '',
                status:true
            },
            // 添加用户表单验证
            addFormRules: {
                realname: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' }
                ],
                role_id: [
                    { required: true, message: '请选择管理角色', trigger: 'change' }
                ],
                // email: [
                //     { required: true, message: '请输入邮箱', trigger: 'blur' },
                //     { validator: checkemail, trigger: 'blur' }
                // ],
                // phone: [
                //     { required: true, message: '请输入手机号', trigger: 'blur' },
                //     { validator: checkphone, trigger: 'blur' }
                // ],
            },
            
        }
    },
    created(){
        this.getUserslist(),
        this.options()
    },
    methods: {
        getUserslist(){
            this.$http.get('/Manager',{ params: this.ArrObj }).then( v => {
                const res = v.data;
                if(res.meta.status !== 200){return this.$msg.error('获取失败');}
                // console.log(res);
                this.Userslist = res.data.users;
                // console.log(this.Userslist);
                this.total = res.data.total;
                this.loading=false;
            })
        },
        // 监听 pagesize 函数
        handleSizeChange(newSize){
            // console.log(newSize);
            this.ArrObj.pagesize = newSize;
            this.getUserslist();
        },
        // 监听 页码值 函数
        handleCurrentChange(newPage){
            // console.log(newPage);
            this.ArrObj.pagenum = newPage;
            this.getUserslist();
        },
        // 监听 switch 修改状态 函数
        statusUp(userinfo){
            // console.log(userinfo);
            this.$http.put(`Manager/audit/id/${userinfo.id}`).then(v => {
                const res = v.data;
                if(res.meta.status !== 200){
                    userinfo.status = !userinfo.status;
                    return this.$msg.error("用户修改状态失败！");
                }
                this.$msg.success("用户修改状态成功！");
            });
        },
        // 获取下拉管理角色数据
        options(){
            this.$http.put('Manager/options').then(v => {
                const res = v.data;
                if(res.meta.status !== 200){
                    userinfo.status = !userinfo.status;
                    return this.$msg.error("获取管理角色失败！");
                }
                this.option = res.data;
                console.log(this.option);
            });
        },
        // 监听 对话框 关闭事件
        addDialog(){
            this.$refs.addFormRef.resetFields();
            this.addForm = {
                realname:'',
                username: '',
                password: '',
                role_id: '',
                status:true
            };
            this.title='添加用户';
        },
        addAdminUser(){
            this.$refs.addFormRef.validate( valid => {
                // console.log(valid);
                if(!valid){return}
                console.log(this.addForm);
                // 可以发送添加用户请求
                this.$http.post('Manager/add',this.addForm).then( v => {
                    const res = v.data;
                    // console.log(res);
                    if(res.meta.status !== 201&&res.meta.status !== 200){return this.$msg.error(res.meta.msg);}

                    this.$msg.success(res.meta.msg);
                    // 隐藏添加用户的电话框
                    this.adddialogVisible = false;
                    // 重新获取用户列表
                    this.getUserslist();
                });
            });
        },
        // 展示修改 对话框
        editMessage(rew){
            this.addForm = rew;
            this.title='修改用户';
            this.adddialogVisible = true;
            // console.log(this.addForm);
            // 重新获取用户列表
            this.getUserslist();
        },

        // 删除多余
        async del(id){
            // 弹窗提示
            const a = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err);
            
            // 取消监听
            if(a == 'cancel'){return this.$msg.info('已取消');}
            // console.log(id);
            this.$http.get('Manager/del/id/'+ id).then( v => {
                const res = v.data;
                if(res.meta.status !== 200){return this.$msg.error(res.meta.msg);}
                this.$msg.success(res.meta.msg);
                // 重新获取用户列表
                this.getUserslist();
            });
        }
    }
}
</script>
<style Lang="less" scoped>
    .el-table{
        margin-top: 15px;
        font-size: 12px;
    }
    .el-pagination{
        margin-top: 15px;
    }
</style>
<style>
  body {
    margin: 0;
  }
</style>
